<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="草稿箱" name="first">草稿箱</el-tab-pane>
      <el-tab-pane label="模板库" name="second">模板库</el-tab-pane>
    </el-tabs>

    <!--草稿箱表格-->
    <el-table v-loading="loading" :data="tempDraftList" v-show="tempDraftShow">
      <el-table-column label="草稿Id" prop="draftId" width="150" />
      <el-table-column label="版本号" prop="userVersion" :show-overflow-tooltip="true" width="150" />
      <el-table-column label="版本描述" prop="userDesc" :show-overflow-tooltip="true" width="300" />
      <el-table-column label="小程序AppID" prop="sourceMiniprogramAppid" :show-overflow-tooltip="true" width="200" />
      <el-table-column label="小程序名称" prop="sourceMiniprogram" :show-overflow-tooltip="true" width="150" />
      <el-table-column label="上传人" prop="developer" :show-overflow-tooltip="true" width="100" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="300">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-plus"
            @click="handleAdd(scope.row)"
            v-hasPermi="['wechat:temp:add']"
          >添加模板库</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--模板库表格-->
    <el-table v-loading="loading" :data="tempList" v-show="tempShow">
      <el-table-column label="模板Id" prop="templateId" width="150" />
      <el-table-column label="版本号" prop="userVersion" :show-overflow-tooltip="true" width="150" />
      <el-table-column label="版本描述" prop="userDesc" :show-overflow-tooltip="true" width="300" />
      <el-table-column label="小程序AppID" prop="sourceMiniprogramAppid" :show-overflow-tooltip="true" width="200" />
      <el-table-column label="小程序名称" prop="sourceMiniprogram" :show-overflow-tooltip="true" width="150" />
      <el-table-column label="上传人" prop="developer" :show-overflow-tooltip="true" width="100" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="300">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['wechat:temp:remove']"
          >删除</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleCommit(scope.row)"
            v-hasPermi="['wechat:temp:commit']"
          >上传代码</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { listTempDraft, addTemp, listTemp, removeTemp, pageList, commitTemp} from "@/api/wechat/tempDraft";

  export default {
    name: "TempDraft",
    data() {
      return {
        // 遮罩层
        loading: true,
        //tabs
        activeName: 'first',
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 小程序草稿箱数据
        tempDraftList: [],
        //小程序模板库数据
        tempList: [],
        //草稿箱表格是否隐藏
        tempDraftShow:true,
        //模板库表格是否隐藏
        tempShow: false,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 是否显示弹出层（数据权限）
        openDataScope: false,
        // 日期范围
        dateRange: [],

        // 菜单列表
        menuOptions: [],
        // 部门列表
        deptOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          roleName: undefined,
          roleKey: undefined,
          status: undefined
        },

      };
    },
    created() {
      this.getTempDraftList();
    },
    methods: {

      //tabs点击事件
      handleClick(tab,event){
        console.log(tab.index)
        if(tab.index == 0){
          this.tempShow = false;
          this.tempDraftShow = true;
          this.getTempDraftList();
        }else if(tab.index == 1){
          this.tempShow = true;
          this.tempDraftShow = false;
          this.getTempList();
        }
      },

      /** 查询小程序草稿箱代码列表 */
      getTempDraftList() {
        this.loading = true;
        listTempDraft().then(
          response => {
            this.tempDraftList = response.data;
            this.loading = false;
          }
        );
      },

      //查询模板库
      getTempList(){
        this.loading = true;
        listTemp().then(
          response => {
            this.tempList = response.data;
            this.loading = false;
          }
        );
      },

      //添加到模板库
      handleAdd(row){
        const draftId = row.draftId;
        this.$confirm('是否确认添加草稿Id"' + draftId + '"的数据项到模板库?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          let params = {"draftId":draftId}
          return addTemp(params);
        }).then(() => {
          this.getTempDraftList();
          this.msgSuccess("添加成功");
        }).catch(function() {});
      },
      //删除指定模板库数据
      handleDelete(row){
        const templateId = row.templateId;
        this.$confirm('是否确认删除模板Id"' + templateId + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          let params = {"templateId":templateId}
          return removeTemp(params);
        }).then(() => {
          this.getTempList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
      },
      //上传代码
      handleCommit(row){
        const appId = row.sourceMiniprogramAppid;
        this.$confirm('是否确认上传appId"' + appId + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          let data = {
            appId: appId,
            templateId:row.templateId,
            appName: row.sourceMiniprogram,
            developer: row.developer,
            userDesc: row.userDesc,
            userVersion: row.userVersion
          }
          return commitTemp(data);
        }).then(() => {
          this.getTempList();
          this.msgSuccess("提交成功");
        }).catch(function() {});
      }

    }
  };
</script>
<style>
  .el-table td, .el-table th{
    text-align: center !important;
  }
</style>
